<template>
  <div class="viewContain">
    <!-- 查询数据列表 -->
    <el-form :model="listQuery" size="small" label-width="100px">
      <el-row>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 12 }">
          <el-form-item label="apk类型 :">
            <el-select v-model="listQuery.apkClass" clearable placeholder="请选择:">
              <el-option
                v-for="item in apkTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 12 }">
          <el-form-item label="设备id :">
            <el-input
              v-model="listQuery.equipmentNo"
              placeholder="设备id"
              clearable
              @keyup.enter.native="handleSearch"
            />
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 12 }">
          <el-form-item label="更新状态 :">
            <el-select v-model="listQuery.state" clearable placeholder="请选择:">
              <el-option
                v-for="item in apkStateList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :xs="{ span: 24 }" :sm="{ span: 12 }" :md="{ span: 6 }" :xl="{ span: 12 }">
          <el-form-item>
            <el-button size="mini" type="primary" @click="handleSearch">查询</el-button>
            <el-button size="mini" type="primary" plain @click="resetInput">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 列表数据ok -->
    <el-table
      ref="table"
      v-loading="loading"
      fit
      stripe
      :data="tableData"
      border
      size="mini"
    >
      <el-table-column align="center" label="序号" type="index">
        <template slot-scope="scope">
          <span>{{ (listQuery.pageNo - 1) * listQuery.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="apkClass" align="center" label="apk类型" width="110" />
      <el-table-column prop="apkName" align="center" label="apk名称" width="320" :show-overflow-tooltip="true" />
      <el-table-column prop="apkVersion" align="center" label="apk版本号" width="80" :show-overflow-tooltip="true" />
      <el-table-column prop="bindState" align="center" label="更新状态" width="180" />
      <el-table-column prop="deviceName" align="center" label="设备名称" width="90" />
      <el-table-column prop="equipmentNo" align="center" label="设备id" width="200" />
      <el-table-column prop="finishTime" align="center" label="更新完成时间" />
      <el-table-column prop="state" align="center" label="设备状态" />
    </el-table>
    <pagination
      :total-count="totalCount"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>
<script>
import { commonMixin } from '@v/mixin/commonMixin.js'
import ComApiUrl from '@a/comomApi.js'
import pagination from '@/components/pagination/index.vue'
import { gainSoftwareType, gainUpdateState } from '@a/software/software.js'
// eslint-disable-next-line no-unused-vars
export default {
  // eslint-disable-next-line vue/no-unused-components
  components: { pagination },
  mixins: [commonMixin],
  data() {
    return {
      // 查询列表信息接口ok
      comApiUrlList: new ComApiUrl('/autoUpdate/api/autoUpdateDeviceBind/getApkBindDeviceList'),
      loading: false,
      // ok listquery
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        apkClass: '',
        equipmentNo: '',
        state: ''
      },
      apkTypeList: [{ label: '', value: '' }],
      apkStateList: [{ label: '', value: '' }],
      tableData: [
        {
          apkClass: '',
          apkName: '',
          apkSize: '',
          apkVersion: '',
          build: 0,
          createTime: '',
          explanation: '',
          type: '',
          url: ''
        }
      ]
    }
  },
  mounted() {
    this.getList()
    this.getApkType()
  },
  methods: {
    getList() {
      this.getInfo()
    },
    // 查询 ok
    handleSearch() {
      this.getList()
    },
    // 获取apk类型 ok
    getApkType() {
      gainSoftwareType().then(res => {
        if (res.code === 0) {
          this.apkTypeList = res.data['AUTO_UPDATE_APK_TYPE']
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
      gainUpdateState().then(res => {
        if (res.code === 0) {
          this.apkStateList = res.data['AUTO_UPDATE_FINISH_STATE']
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      })
    },

    resetInput() {
      this.listQuery.apkClass = ''
      this.listQuery.equipmentNo = ''
      this.listQuery.state = ''
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.loadingContainer{
 position: absolute;
 left: 50%;
 top:50%;
 display: none;
 margin-left: -40px;
 margin-top:-50px;
 z-index: 999;
}
</style>
